@()(implicit request: RequestHeader,messages: Messages)
@main(messages("editYourEmail"))("userProfile","securitySet") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			tr > td {
				padding-top: 10px !important;
				padding-bottom: 10px !important;
			}

			.glyphicon-remove::before {
				content: "" !important;
			}

			.fglefttitle {
				font-size: 30px;
				font-weight: lighter;
				color: #A2A2A2;
			}

	</style>
	<div class="page-content">

		<div class="row">
			<div class="col-md-12">
				<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<a href="@routes.UserController.securitySetBefore">@messages("securitySettings")</a>
								/
								<span>@messages("editYourEmail")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body form">

						<div class="form-horizontal" id="wizard">
							<div class="form-wizard">
								<div class="form-body">
									<ul class="nav nav-pills nav-justified steps">
										<li class="active">
											<a href="#tab1" data-toggle="tab" class="step" aria-expanded="true">
												<span class="number"> 1 </span>
												<span class="desc">
													<i class="fa fa-check"></i> @messages("verifyIdentity") </span>
											</a>
										</li>
										<li>
											<a href="#tab2" data-toggle="tab" class="step">
												<span class="number"> 2 </span>
												<span class="desc">
													<i class="fa fa-check"></i> @messages("connectWithEmail") </span>
											</a>
										</li>
										<li>
											<a href="#tab3" data-toggle="tab" class="step active">
												<span class="number"> 3 </span>
												<span class="desc">
													<i class="fa fa-check"></i> @messages("done") </span>
											</a>
										</li>
									</ul>
									<div id="bar" class="progress progress-striped" role="progressbar">
										<div class="progress-bar progress-bar-success" style="width: 25%;"> </div>
									</div>
									<div class="tab-content">

										<div class="tab-pane active" id="tab1">

											<form id="form1">

												<div class="col-sm-offset-1">
													<h5 class="block">@messages("identityVerifyInfo")：</h5>
												</div>

												<div class="form-group">
													<label class="control-label col-md-3">@messages("boundCellPhone")
													</label>
													<div class="col-md-4">
														<input type="text" class="form-control fillByName" name="phone" readonly>
													</div>
												</div>

												<div class="form-group layui-form-item">
													<label class="control-label col-sm-3 layui-form-label">@messages("verificationCode"):</label>
													<div class="form-inline col-sm-9 layui-input-block">
														<input id="loginPassword" name="validCode" placeholder="" autofocus="autofocus"
														class="form-control layui-input" value="" maxlength="11"/>
														<button type="button" class="refreshButton btn blue" id="refreshButton" onclick="EmailChange.sendValidCode">
															@messages("sendVerificationCode")</button>
													</div>
												</div>

												<div class="form-actions">
													<div class="row">
														<div class="col-md-offset-3 col-md-9">
															<a href="javascript:;" class="btn btn-outline green button-next myNext" data-valid="false">
																messages("nextStep")
																<i class="fa fa-angle-right"></i>
															</a>
														</div>
													</div>
												</div>

											</form>

										</div>

										<div class="tab-pane" id="tab2">

											<form id="form2">

												<div class="form-group">
													<label class="control-label col-md-3">@messages("connectWithEmail")
													</label>
													<div class="col-md-4">
														<input type="text" class="form-control" name="email" placeholder="@messages("enterYourEmailAgain")">
													</div>
												</div>

												<div class="form-group layui-form-item">
													<label class="control-label col-sm-3 layui-form-label">@messages("EmailVerificationCode"):</label>
													<div class="form-inline col-sm-9 layui-input-block">
														<input id="loginPassword" name="validCode" placeholder="" autofocus="autofocus"
														class="form-control layui-input" value="" maxlength="11"/>
														<button type="button" id="refreshButton" class="refreshButton btn blue" onclick="EmailChange.sendEmailValidCode">
															@messages("sendVerificationCode")</button>
													</div>
												</div>

												<div class="form-actions">
													<div class="row">
														<div class="col-md-offset-3 col-md-9">
															<a href="javascript:;" class="btn btn-outline green button-next">
																@messages("confirm")
															</a>
														</div>
													</div>
												</div>

											</form>

										</div>
										<div class="tab-pane" id="tab3">

											<div class="row">
												<div class="fgleftct" align="center" style="margin-top: 10px">
													<span class="fglefttitle">@messages("bindEmailSuccessfully")！<br>
														<span
														style="font-size: 20px;">
															<span id="second">3</span>
															messages("secondsBackTo")<a href="@routes.UserController.securitySetBefore">
															messages("originalPage")</a>。
														</span>  </span> <br> <br>


												</div>
											</div>


										</div>

									</div>
								</div>

							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</div>


	<script>

			var id = "@request.session.get("id")"

			$(function () {
				EmailChange.init

			})
	</script>


}
